<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
    <!-- <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script> -->
    <script src="./jsmpeg.min.js" charset="utf-8"></script>
    <title>播放rtsp</title>
</head>

<body>
    <textarea id="rtspUrl" style="width:600px;height:150px;" placeholder="rtsp?url"></textarea>
    <div style="margin-bottom:10px;">
        <button id="playBtn">播放</button>
    </div>
    <canvas id="canvas" style="width: 600px; height: 600px; background:#eee;"></canvas>
</body>
<script>
    var rtsp = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4';
    document.querySelector('#playBtn').onclick = function() {
        rtsp = document.querySelector('#rtspUrl').value.trim();
        // 将rtsp视频流地址进行btoa处理一下 
        new JSMpeg.Player("ws://localhost:9999/rtsp?url="+btoa(rtsp), { 
            canvas: document.getElementById("canvas")
        })
    };
</script>

</html>
